<template>
  <view style="background-color: #fff; padding-top: 1upx" class="bd">
    <!-- <view style="padding: 30upx;background-color: #fff;font-size: 36upx;font-weight: 900;
			color: #555;margin: 2upx 0 20upx;">{{detail.planName}}</view> -->
    <!-- <view style="padding: 40upx;background-color: #fff;margin: 0 0 20upx;">
			<view style="margin-bottom: 20upx;">
				<u-tag text="计划名称" type="success" style="background-color: #18C7E1;color: #fff;"/>
			</view>
			<view style="text-indent: 50upx;font-size: 32upx;line-height: 50upx;">{{detail.planName}}</view>
		</view> -->
    <!-- <view class="title">
			<text class="txt">计划名称</text>
		</view>
		<view class="art">{{detail.planName}}</view> -->
    <!-- 开关 -->
    <!-- 		<view class="title">
			<text class="txt">完成状态</text>
		</view>
		<view class="art">
			<view class="flex flex-j-b flex-al-c uni-item-line" style="padding: 20upx 0;">
				<view>是否完成</view>
				<u-switch v-model="checked1" @change="checked1Change"
					active-color="#18C7E1" inactive-color="#eee"></u-switch>
			</view>
		</view> -->
    <view v-if="detail && detail.record">
      <view class="title">
        <text class="txt">测量结果</text>
      </view>
      <div style="display: flex">
        <view class="art">身高 {{ detail.record.height }}cm</view>
        <view class="art">体重 {{ detail.record.weight }}kg</view>
        <view class="art" v-if="detail.planAgeMonth < 36"
          >头围 {{ detail.record.headCircumference }}cm</view
        >
        <view
          class="art"
          v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 0"
          >视力(左) {{ detail.record.vision }}</view
        >
        <view
          class="art"
          v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 0"
          >视力(右) {{ detail.record.rightVision }}</view
        >
      </div>
      <view
        class="art"
        v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 1"
        >左眼近视度数 {{ detail.record.leftMyopiaVision }}</view
      >
      <view
        class="art"
        v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 1"
        >左眼散光度数 {{ detail.record.leftAstVision }}</view
      >
      <view
        class="art"
        v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 1"
        >右眼近视度数 {{ detail.record.rightMyopiaVision }}</view
      >
      <view
        class="art"
        v-if="detail.planAgeMonth >= 36 && detail.record.isNormal == 1"
        >右眼散光度数
        {{ detail.record.rightAstVision }}
      </view>
      <view class="art" v-if="detail.record.checkWarn == 0"
        >其他指标：正常</view
      >
      <view class="art" v-if="detail.record.isNormal == 0">视力情况：正常</view>
      <view class="art" v-if="detail.record.isNormal == 1">视力情况：近视</view>

      <view class="art" v-if="detail.record.checkWarn == 1"
        >其他指标：异常</view
      >
      <view class="art" v-if="detail.record.checkWarn == 1"
        >异常备注：{{ detail.record.remarkNote }}</view
      >
    </view>
    <!-- 		<view class="title">
			<text class="txt">适用月龄</text>
		</view>
		<view class="art" v-html="detail.planAgeMonth">{{detail.planAgeMonth}}月</view> -->
    <view class="title">
      <text class="txt">体格测量</text>
    </view>
    <view class="art">{{ detail.sketch }}</view>
    <view class="title">
      <text class="txt">体格检查</text>
    </view>
    <view class="art" v-html="detail.checkItemsContent"></view>
    <view class="title">
      <text class="txt">发育评估参考</text>
    </view>
    <view class="art" v-html="detail.planRemark"></view>

    <!-- <view style="margin: 80upx 20upx;">
			<u-button type="primary" :style="{background: detail.subscribe?'#24D5EA':'#ccc'}">
				{{detail.subscribe?'预约':'该门诊未开通预约服务'}}
			</u-button>
		</view> -->

    <!-- 底部弹出层 -->
    <u-popup v-model="popup" mode="bottom">
      <view>
        <!-- 人生若只如初见，何事秋风悲画扇 -->
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">身高(CM)</view>
          <u-input
            v-model="child.height"
            type="text"
            :border="true"
            placeholder="请输入身高"
          />
        </view>
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">体重(KG)</view>
          <u-input
            v-model="child.weight"
            type="text"
            :border="true"
            placeholder="请输入体重"
          />
        </view>
        <view
          class="inp-group flex flex-al-c"
          v-if="config.globalData.user.age <= 3"
        >
          <view class="inp-title">头围(CM)</view>
          <u-input
            v-model="child.headCircumference"
            type="text"
            :border="true"
            placeholder="请输入头围"
          />
        </view>
        <view
          class="inp-group flex flex-al-c"
          v-if="config.globalData.user.age > 3"
        >
          <view class="inp-title">视力</view>
          <u-input
            v-model="child.vision"
            type="text"
            :border="true"
            placeholder="请输入视力"
          />
        </view>
        <view class="inp-group flex flex-al-c">
          <view class="inp-title">是否异常</view>
          <mySwitch
            :switchList="['是', '否']"
            :defaultSwitch="checked2"
            @change="checked2Change"
          ></mySwitch>
          <!-- <u-switch v-model="checked2" @change="checked2Change" active-color="#18C7E1" inactive-color="#eee"></u-switch> -->
        </view>
        <view class="inp-group flex flex-al-c" v-if="showRemarkNote">
          <view class="inp-title">异常说明</view>
          <u-input
            v-model="child.remarkNote"
            type="textarea"
            :border="true"
            placeholder="请输入异常说明"
          />
        </view>

        <view style="width: 90%; margin: 50upx auto 50upx">
          <button
            type="default"
            style="background: #18c7e1; color: #fff"
            @tap="subUserInfo"
          >
            保存
          </button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      detail: {},

      checked1: false,
      popup: false,

      checked2: false,
      showRemarkNote: false,

      child: {
        height: "",
        weight: "",
        headCircumference: "", // 头围
        vision: "", // 视力
        checkWarn: "", // 是否异常
        remarkNote: "", // 异常说明
      },
    };
  },
  watch: {
    popup(newv) {
      if (!newv) {
        this.getPlanDetail();
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
    this.getPlanDetail();
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    getPlanDetail() {
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .get("/childrenInfo/findChildCarePlan", {
          id: this.id,
        })
        .then((res) => {
          uni.hideLoading();
          //console.log(res)
          if (res.data.code === 200) {
            self.detail = res.data.data;
            console.log(res.data.data);
            if (res.data.data.check_type == "1") {
              self.checked1 = true;
            } else {
              self.checked1 = false;
            }
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
    // 点击是否完成
    checked1Change() {
      //console.log('kkkk')
      if (this.checked1) {
        this.popup = true;
      }
    },
    // 点击是否异常
    checked2Change() {
      if (this.checked2) {
        this.showRemarkNote = true;
      } else {
        this.showRemarkNote = false;
      }
    },
    valid() {
      if (!this.child.height) return false;
      if (!this.child.weight) return false;
      if (this.config.globalData.user.age <= 3 && !this.child.headCircumference)
        return false;
      if (this.config.globalData.user.age > 3 && !this.child.vision)
        return false;
      return true;
    },
    subUserInfo() {
      if (!this.valid()) return;
      let self = this;
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      setTimeout((s) => {
        uni.hideLoading();
      }, 5000);
      this.config
        .post("/childrenInfo/childHealthCheckRecord", {
          height: this.child.height,
          weight: this.child.weight,
          headCircumference: this.child.headCircumference,
          vision: this.child.vision,
          checkType: this.checked1 ? "1" : "0",
          checkWarn: this.checked2 ? "1" : "0",
          remarkNote: this.child.remarkNote,
          childCarePlanId: this.id,
          age: this.config.globalData.user.age,
        })
        .then((res) => {
          uni.hideLoading();
          if (res.data.code === 200) {
            self.popup = false;
            self.getPlanDetail();
            setTimeout((s) => {
              uni.showToast({
                title: res.data.msg,
                icon: "none",
              });
            }, 500);
          } else {
            if (res.data.code == "-201") {
              self.config.handleError(res.data);
            } else {
              uni.showToast({
                title: self.config.handleError(res.data),
                icon: "none",
              });
            }
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;

  .inp-title {
    width: 200upx;
  }
}

.title {
  padding: 20upx 50upx;
  background-color: #eee;

  .txt {
    padding: 0 20upx;
    border-left: 8upx solid #18c7e1;
  }
}

.art {
  padding: 30upx 50upx;
  line-height: 46upx;
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
  }
  .title {
    background-color: #000000 !important;
    color: #ccc !important;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .art {
    color: #ccc !important;
  }
  >>> span {
    color: #ccc !important;
  }
  .t1 {
    color: #ccc !important;
  }
}
</style>